<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES6练习</title>
  </head>
  <body>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      /**
       * let命令
       */
      let a = 5;
      var b = 1;
      console.log(a);
      console.log(b);

      // 小例1 for循环中使用
      for (let i = 1; i < a; i++) {
        console.log(i);
      }
      // let声名变量不存在1变量提升
      for (let i = 1; i < 3; i++) {
        let i = "abc";
        console.log(i);
      }
      //暂时性死区
      // 只要在块级作用域中存在“let”命令，则let所申明的变量就“绑定”这个块级区域，不受外部作用域的影响
      var ads = 123;
      if (true) {
        ads = "abc";
        let ads;
      }

      /**
       * const声明变量
       */
      // 声明一个只读变量
      // 声明但不赋值会报错
      const PI = 3.14;
      console.log(PI);
      // PI=3
      // console.log(PI);

      /**
       * 数组的解构赋值
       */
      // 按次序排列排列，变量的取值由位置决定
      let [aa, bb, cc] = [11, 22, 33];
      console.log(aa);
      console.log(bb);
      console.log(cc);

      let [foo, [[bar], baz]] = ["a", [["b"], "c"]];
      console.log(foo);
      console.log(bar);
      console.log(baz);

      let [, , third] = ["foo", "bar", "baz"];
      console.log(third);

      let [x, , y] = [1, 2, 3];
      console.log(x);
      console.log(y);

      let [head, ...tail] = [1, 2, 3, 4];
      console.log(head);
      console.log(tail);

      let [ax, ay, ...z] = ["a"];
      console.log(ax);
      console.log(ay);
      console.log(z);

      /**
       * 对象的解构赋值
       */
      // 变量取值按取属性同名的值，方法同样
      let { fob, baa } = { fob: "aaa", baa: "bbb" };
      console.log(fob);
      console.log(baa);
      // let {log,sin,cos} =Math;
      // console.log(log);

      const { log } = console;
      log("hello");

      // 对象解构时重命名
      let { foc: abz } = { foc: "aaa", bar: "bbb" };
      log(abz);

      let obj = { first: "hello", last: "world" };
      let { first: f, last: l } = obj;
      log(f);
      log(l);

      let obja = {
        p: ["HELLO", { ya: "WORLD" }],
      };
      let {
        p,
        p: [xa, { ya }],
      } = obja;
      log(xa);
      log(ya);
      log(p);

      // 嵌套赋值
      let obj1 = {};
      let arr = [];
      ({ foo: obj1.prop, bara: arr[0] } = { foo: 123, bara: true });
      log(obj1);
      log(arr);

      // 解构赋值可以取到继承的属性。
      const obj2 = {};
      const obj3 = { foo1: "bar" };
      // 设置obj2的原型对象
      Object.setPrototypeOf(obj2, obj3);
      const { foo1 } = obj2;
      log(foo1);

      // 对象解构默认值
      var { message: msg = "Something went wrong" } = {};
      log(msg);

      // 对数组进行对象属性的解构。
      let arr1 = [1, 2, 3];
      let { 0: first, [arr1.length - 1]: last } = arr1;
      // let{arr[0]:first,arr[2]:last} = {arr[0],arr[1],arr[2]}
      log(first);
      log(last);
      /**
       * 字符串解构赋值
       */
      const [t, r, u, i, o] = "sayyi";
      log(t);
      log(r);
      log(u);
      log(i);
      log(o);
      let { length: len } = "hello";
      log(len);

      /**
       * 函数参数的解构赋值
       */
      function add([aab, bba]) {
        return aab + bba;
      }

      log(add([3, 5]));

      let as = [
        [1, 2],
        [3, 4],
      ].map(([ad, bd]) => ad + bd);
      log(as);

      function move({ x = 0, y = 0 } = {}) {
        console.log(x, y);
        return [x, y];
      }
      log(move({ x: 3, y: 8 }));
      log("第一个", move({ X: 3 }));
      log("第二个", move({ x: 3 }));
      log(move({}));
      log(move());

      function move1({ x, y } = { x: 0, y: 0 }) {
        console.log(typeof y)
        return [x, y];
      }
      log(move1({ x: 3, y: 8 }));
      log(move1({ x: 3 }));
      log(move1({}));
      log(move1());
    </script>
  </body>
</html>
